<!-- /**
*@author: ptt
*@desc: echarts地图 -- 珠海
*@date: 2023/12/12
*/ -->
<template>
    <div class="echart-box">
        <div
            v-if="$handleStr.hasValue(data)"
            ref="map"
            class="echart_contain"
        ></div>
        <img
            v-else
            src="@/assets/images/noData_dark.png"
            class="img"
            alt=""
            srcset=""
        />
    </div>
</template>

<script>
import * as echarts from 'echarts';
import zhuhaiJson from '../zhuhai.json';
export default {
    props: {
        data: {
            type: Object
        }
    },
    data() {
        return {
            options: {
                grid: {
                    top: '18%',
                    bottom: '18%'
                },
                tooltip: {}, //只有开启了才会展示tooltip
                geo: {
                    map: 'zhuhai', //必填。地图资源
                    roam: true, //是否允许拖拽和缩放
                    label: {
                        show: true //名称固定显示
                    },
                    cursor: 'default', //悬停时鼠标小手图案
                    // regions: [], // 各个行政区划（可配置单独的颜色）
                    itemStyle: {
                        areaColor: '#cdcdcd'
                    },
                    zoom: 1, //缩放
                    scaleLimit: {
                        min: 1, //最小缩放值
                        max: 2
                    },
                    tooltip: {
                        show: false //地图不展示tooltip
                    }
                }, //地理坐标系 提供经纬度定位.可以搭配涟漪散点图
                // color: ['#00ffff'],
                visualMap: {
                    type: 'continuous', //piecewise分段型 continuous连续型
                    min: 100, //最低值
                    max: 1000, // 最高值
                    text: ['高', '低'],
                    // range: [450, 3800], //手柄的位置 ，应该处于最小最大值之间
                    realtime: false, //拖拽时是否实时更新图表
                    calculable: true, //是否显示临界值
                    itemHeight: 80, //控制器的高度
                    inRange: {
                        color: ['#9ad6d3', '#edf826', '#ff5600']
                    } //视觉范围颜色
                }, //左下角工具栏
                dataset: {
                    dimensions: [
                        'lon',
                        'lat',
                        'xzqh',
                        'dwmc',
                        'company',
                        'value'
                    ], //指定数据维度(声明后visualMap可以根据散点值匹配不同颜色，不声明则所有的散点保持一致颜色)。具体的映射还是得到encode中设置。
                    // sourceHeader: false, // false表示source的第一行开始就是数据
                    source: []
                }, //数据集
                series: [
                    // {
                    //     type: 'map',
                    //     name: '珠海市',
                    //     map: 'zhuhai', //使用地图数据
                    //     roam: true, //是否允许拖拽和缩放
                    //     label: {
                    //         show: true //名称固定显示
                    //     }
                    //     // data: []
                    // }, //不用这个，因为不能搭配涟漪散点
                    {
                        type: 'effectScatter', //涟漪散点
                        coordinateSystem: 'geo', //散点的参考坐标系。cartesian2d 二维坐标系（笛卡尔坐标系）， geo （地理坐标系）
                        // data: [], //设置了dataset就不需要data了
                        // datasetIndex: 0, //默认为0 ， 表示选中的第一个dataset作为数据集(暂且不知道dataset能否写成数组的形式)
                        symbol: 'circle', //散点图案 默认圆形
                        symbolSize: data => {
                            if (this.$handleStr.hasValue(data.value)) {
                                return Math.sqrt(data.value) / 2 + 5;
                            } else {
                                return '10';
                            }
                        }, //散点大小
                        encode: {
                            lng: 'lon', //映射地图坐标中的经度。 如果是直角坐标就是x:'keyName'
                            lat: 'lat', //映射地图坐标中的纬度。 如果是直角坐标就是y:'keyName'
                            // tooltip: ['xzqh', 'value'], //tooltip中将会连接name和value作为展示
                            // seriesName: ['company'], // 只能填写dimensions中已有的维度名
                            itemName: 'xzqh' //指定数据项的名字
                            // value: 'value' //指定数据
                        }, //对数据集dataset的映射
                        // colorBy: 'series',
                        zlevel: 5,
                        cursor: 'default', //悬停时鼠标小手图案
                        //涟漪特效设置
                        rippleEffect: {
                            // color: 'red', //涟漪的颜色，默认是点的颜色
                            number: 3, //涟漪的数量
                            period: 4, //动画的周期（秒数）
                            scale: 2.5, //波纹最大缩放比
                            brushType: 'stroke' //波纹绘制方式 fill填充 stroke 圈圈
                        },
                        label: {
                            show: true, //是否显示点位名称
                            formatter: '{@dwmc}' // a是series名 b是当个数据项名字 c是数据值。 除此之外，用@加上维度名称，就可以引用这个维度的值了。（需要设置dateset)
                            // position: ['40%', '40%'] //距离左边 距离上边
                        },
                        tooltip: {
                            show: true,
                            formatter: pams => {
                                const d = pams.data;
                                const str =
                                    d.company +
                                    '<br/>' +
                                    pams.marker +
                                    d.xzqh +
                                    '&nbsp;&nbsp;&nbsp;' +
                                    d.value;
                                // console.log('pam', pams);
                                return str;
                            }
                        }
                    },
                    {
                        type: 'lines', //路径线
                        name: '运输线',
                        tooltip: {
                            show: true, //线条需要展示tooltip
                            formatter: pams => {
                                return (
                                    pams.seriesName + '：' + pams.data.lineName
                                );
                            }
                        },
                        label: {
                            show: true,
                            position: 'middle',
                            formatter: pams => {
                                return pams.data?.lineName || pams.seriesName;
                            }
                        },
                        // 线条设置
                        lineStyle: {
                            width: 2,
                            color: '#00ffff', //设置了visualMap后此颜色不会生效，要去data中单独设置才行
                            cap: 'round', //线条尾端样式  butt是方形 round是圆形 square
                            curveness: 0.05 // 线条曲度小(0)-大(1)
                        },
                        //  线条动画
                        effect: {
                            show: true,
                            symbol: 'arrow',
                            period: 6, //动画的周期（秒数）
                            symbolSize: 12,
                            trailLength: 0 //特效拖尾长度 0-1 数字越大拖尾越长
                        }, //线的特效设置
                        zlevel: 3,
                        data: []
                    }
                ]
            }
        };
    },
    watch: {
        data: {
            handler(newVal, oldVal) {
                this.$nextTick(() => {
                    this.initEcharts();
                });
            }
        }
    },
    mounted() {
        this.initEcharts();
    },
    methods: {
        // 初始化图表
        initEcharts() {
            if (this.$handleStr.hasValue(this.data)) {
                const echartDom = this.$refs.map;
                const myChart = echarts.init(echartDom);
                echarts.registerMap('zhuhai', zhuhaiJson); //注册地图数据
                this.options.visualMap.min = this.$handleStr.toNum(
                    this.data.range[0]
                );
                this.options.visualMap.max = this.$handleStr.toNum(
                    this.data.range[1]
                );
                // 载入地图数据
                // this.options.series[0].data = this.data.list;
                // 载入dataset数据
                this.options.dataset.source = this.data.list;
                // 载入路径数据
                const startArr = this.data.list.filter(
                    item => item.type == '起点'
                );
                const endArr = this.data.list.filter(
                    item => item.type == '终点'
                );

                this.options.series[1].data = startArr.map((item, index) => {
                    return {
                        lineStyle: {
                            color: '#00ffff'
                        },
                        lineName: item.lineName,
                        coords: [
                            [item.lon, item.lat], //起点
                            [endArr[0].lon, endArr[0].lat] //终点
                        ]
                    };
                });

                myChart.setOption(this.options);
            }
        },
        // 设置行政区划颜色
        setAreaColor(val) {
            let min = 0;
            let max = 0;
            let average = 0;
            if (this.data?.range?.length) {
                min = this.data.range[0];
                max = this.data.range[1];
                average = (min + max) / 2;
            }

            if (!this.$handleStr.hasValue(val)) return '#ababab';
            if (val < min) {
                return '#9ad6d3';
            } else if (val < average) {
                return '#edf826';
            } else if (val < max) {
                return '#ff9a00';
            } else {
                return '#ff5600';
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.echart-box {
    display: flex;
    align-items: center;
    justify-content: center;
    .echart_contain {
        width: 100%;
        height: 100%;
    }

    .img {
        width: 65%;
    }
}
</style>
